import {AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
import * as echarts from 'echarts';

@Component({
  selector: 'lib-echart-line',
  standalone: true,
  imports: [],
  // templateUrl: './echart-line.component.html',
  styleUrl: './echart-line.component.css',
  template:`
    <div id="eC" #chartControl  style="width: 600px;height:400px;"  ></div>
  `
})
export class EchartLineComponent implements AfterViewInit {
  @ViewChild('chartControl',{static:true}) chartControl!:ElementRef;
  @Input() xData:number[] = [];
  @Input() yData:number[] = [];
  @Input() type!:string;

  echartInstance!:echarts.ECharts;

  ngAfterViewInit() {
    console.log(11,{type:this.type,xData:this.xData,yData:this.yData, c:this.chartControl});

    const currentType:EChartType = this.type as EChartType;
    const _currentOptions = EchartList[currentType]?.(this.xData,this.yData);


    if(this.chartControl){
       this.echartInstance = echarts.init(this.chartControl.nativeElement);
       console.log(2,_currentOptions)
       this.echartInstance.setOption(_currentOptions);
    }

  }

}

export type EChartType  = keyof typeof EchartList

const EchartList = {
  'line':(xData:number[],yData:number[])=>{
    const echartOptions:echarts.EChartsOption = {
      tooltip:{
        trigger: 'axis',
      },
      toolbox:{
        show: true,
        feature: {
          dataView: {
            show: true,
            readOnly: false
          },
          restore:{
            show: true
          }
        }

      },
      xAxis:{
        type: 'category',
        data: xData,
        name: 'Day'
      },
      yAxis: {
        type: 'value',
        name: 'Value'
      },
      series:[
        {
          name: 'Value',
          type: 'line',
          data: yData,
        }
      ]
    }

    return echartOptions;

  }
}


